<template>
    <div>
      <Form inline :label-colon="true">
        <FormItem label="角色名称" :label-width="80">
          <Input v-model="params.roleName" placeholder="请输入角色名称"/>
        </FormItem>
        <FormItem>
          <Button
            type="primary"
            @click="publicGetData()"
            style="margin-right: 10px"
            v-auth="'列表'"
          >搜索</Button>
          <Button type="primary" @click="publicUpdateData()" v-auth="'新增'">新增</Button>
        </FormItem>
      </Form>
      <Breadcrumb></Breadcrumb>
      <BaseTable
        ref="baseTable"
        :action="action.readRoleByPage"
        :columns="columns"
        :menu-code="menuCode"
        :public-btn="['delete', 'update', 'view']"
        @handleRemove="publicRemoveData"
        @handleView="publicUpdateData"
        @handleUpdate="publicUpdateData"
      />
      <Drawer
        :title="viewParams.title"
        v-model="viewParams.flag"
        width="70%"
        draggable
        @on-visible-change="publicVisibleChange"
      >
        <RoleManageUpdate
          :type="type"
          @closeView="publicCloseView"
          :key="isRefreshView"
          :role-permission="rolePermission"
          :idName="idName"
          :moduleId="id"
          :unit-list="unitList"
        />
      </Drawer>
    </div>
</template>

<script>
import { tableMixin } from '../../../mixin'
import API_KEY from '../../../api'
import columns from './role-columns'
import { getUnitSelect } from '../../../api/modules/user/unit'
import { typeOf } from '../../../utils/verification'
export default {
  name: 'RoleManage',
  mixins: [tableMixin],
  data () {
    return {
      params: {
        roleName: ''
      },
      action: {
        readRoleByPage: API_KEY.role.readRoleByPage,
        removeDataByKey: API_KEY.role.curdRole
      },
      columns,
      menuCode: 'account-role',
      idName: 'id',
      id: '',
      rolePermission: [],
      unitList: []
    }
  },
  created () {
    this.privateInit()
  },
  methods: {
    publicUpdateData (row = {}, type = 1) {
      // 记录type
      this.type = type
      const arr = ['', '新增', '修改', '查看']
      if (typeOf(this[this.idName]) === 'undefined') {
        throw new Error('当前模块中未定义idName或模块id(比如：userId)但却使用它在进行相应操作')
      }
      this[this.idName] = (this.type === 2 || this.type === 3) ? row[this.idName] : -1
      // 设置视图标题
      this.viewParams.title = this.prefix + arr[this.type] + this.suffix
      // 打开视图
      // this.viewParams.flag = true
      this.viewParams.flag = true
    },
    privateInit () {
      this.getUnitSelect()
    },
    getUnitSelect () {
      getUnitSelect().then(({ data }) => {
        this.unitList = data
      })
    }
  },
  components: {
    RoleManageUpdate: () => import('./RoleManageUpdate')
  }
}
</script>

<style scoped>

</style>
